<template>
  <div class="profile-card">
    <!-- <img class="card-tag" src="Group-4.svg" alt="" /> -->
    <div class="title">{{ title }}</div>
    <!--    <el-tag-->
    <!--      style="border: none"-->
    <!--      :hit="true"-->
    <!--      type="info"-->
    <!--      effect="dark"-->
    <!--      :color="color"-->
    <!--      size="mini"-->
    <!--    >-->
    <!--      {{ tip }}-->
    <!--    </el-tag>-->
    <div class="tip">{{ tip }}</div>
    <svg
      class="svg-tag"
      :class="'dp-' + shieldSeq"
      width="40"
      height="40"
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M19.0391 4.04688L17.7344 4.99609C17.543 5.13672 17.1562 5.39062 16.625 5.69922C15.6797 6.25 14.6953 6.73047 13.6797 7.14062C12.2305 7.71875 10.6953 8.05078 9.13672 8.125L6.96875 8.15625C6.50781 8.16406 6.13672 8.53906 6.13672 9V21.6328C6.13672 24.7891 7.90625 28.2539 10.9648 31.1719C12.2773 32.4219 13.7305 33.4844 15.1836 34.25C16.7383 35.0664 18.2305 35.5 19.5391 35.5C20.8359 35.5 22.3438 35.0547 23.918 34.2305C25.4492 33.4062 26.8594 32.375 28.1133 31.168C29.4453 29.918 30.5742 28.4688 31.4688 26.8789C32.4414 25.0977 32.9375 23.3398 32.9375 21.6328L32.9336 9.00391C32.9336 8.54297 32.5625 8.16797 32.1016 8.16016L29.8945 8.12891C28.3516 8.03906 26.8281 7.70703 25.3906 7.14062L25.0469 6.99609C23.3906 6.29297 21.8711 5.41016 21.4414 5.07422L21.3516 5.00391L20.0234 4.04688C19.7344 3.83203 19.3359 3.83203 19.0391 4.04688ZM19.5391 5.76562L20.3516 6.35156L20.4375 6.41797C21.0938 6.91016 22.8867 7.9375 24.7695 8.69922C26.3945 9.33594 28.1094 9.70703 29.8516 9.80469L31.25 9.82422L31.2539 21.625C31.2539 23.0312 30.8359 24.5195 29.9961 26.0547C29.1836 27.4961 28.1562 28.8086 26.9492 29.9414C25.8086 31.043 24.5195 31.9844 23.125 32.7344C21.7852 33.4375 20.5352 33.8047 19.5391 33.8047C18.5312 33.8047 17.2969 33.4453 15.9688 32.7461C14.6602 32.0586 13.332 31.0898 12.1289 29.9414L11.9297 29.75C9.30469 27.1719 7.82031 24.207 7.82031 21.625V9.82812L9.1875 9.80859C10.9609 9.72266 12.6797 9.35156 14.3047 8.70312C15.3945 8.26172 16.4531 7.74609 17.4688 7.15625L17.7461 6.99219C18.1445 6.75391 18.457 6.54688 18.6562 6.40234L19.5391 5.76562Z"
      />
      <path
        d="M19.2617 10.9883L18.5352 11.5156C18.4297 11.5937 18.2148 11.7344 17.918 11.9062C17.3906 12.2109 16.8438 12.4805 16.2812 12.707C15.4766 13.0273 14.6211 13.2148 13.7539 13.2539L12.5469 13.2695C12.2891 13.2734 12.0859 13.4805 12.0859 13.7383V20.7656C12.0859 22.5234 13.0703 24.4492 14.7734 26.0703C15.5039 26.7656 16.3125 27.3555 17.1211 27.7812C17.9844 28.2344 18.8164 28.4766 19.543 28.4766C20.2656 28.4766 21.1055 28.2305 21.9805 27.7695C22.832 27.3125 23.6172 26.7383 24.3125 26.0664C25.0508 25.3711 25.6836 24.5664 26.1797 23.6797C26.7227 22.6914 26.9961 21.7109 26.9961 20.7617L26.9922 13.7422C26.9922 13.4844 26.7852 13.2773 26.5312 13.2734L25.3047 13.2578C24.4453 13.207 23.6016 13.0234 22.8008 12.707L22.6094 12.6289C21.6875 12.2383 20.8437 11.7461 20.6055 11.5586L20.5547 11.5195L19.8164 10.9883C19.6484 10.8672 19.4258 10.8672 19.2617 10.9883V10.9883Z"
      />
      <path
        d="M19.5391 11.9453L19.9922 12.2695L20.0391 12.3086C20.4023 12.582 21.4023 13.1523 22.4492 13.5781C23.3516 13.9336 24.3086 14.1406 25.2773 14.1914L26.0547 14.2031L26.0586 20.7656C26.0586 21.5469 25.8242 22.375 25.3594 23.2305C24.9062 24.0312 24.3359 24.7617 23.6641 25.3945C23.0273 26.0078 22.3125 26.5312 21.5352 26.9492C20.7891 27.3398 20.0938 27.5469 19.5391 27.5469C18.9805 27.5469 18.293 27.3477 17.5508 26.957C16.8203 26.5742 16.082 26.0352 15.4141 25.3984L15.3047 25.293C13.8438 23.8594 13.0195 22.2109 13.0195 20.7734V14.2031L13.7812 14.1914C14.7695 14.1445 15.7266 13.9375 16.6289 13.5781C17.2344 13.332 17.8242 13.0469 18.3906 12.7148L18.5469 12.625C18.7695 12.4922 18.9414 12.3789 19.0547 12.2969L19.5391 11.9453Z"
      />
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    color: {
      type: String,
      default: "rgba(185, 198, 235, .43)",
    },
    shieldSeq: {
      type: Number,
      default: 1,
    },
    tip: {
      type: String,
      default: "无相关信息记录",
    },
  },
  data() {
    return {};
  },
  methods: {},
  mounted: function() {},
  components: {},
};
</script>
<style lang="scss">
.profile-card {
  cursor: pointer;
  width: 100%;
  height: auto;
  position: relative;
  border-radius: 6px;
  padding: 10px 22px 10px 32px;
  background: linear-gradient(90deg, #1f2130 -21.69%, #454d8a 118.49%);
  margin-bottom: 6px;
  .svg-tag {
    width: 26.8px;
    height: 31.6px;
    position: absolute;
    right: 22px;
    top: 15px;
    &.dp-4 {
      path {
        fill: #dd1825;
      }
    }
    &.dp-3 {
      path {
        fill: #f7b13c;
      }
    }
    &.dp-2 {
      path {
        fill: #0813dd;
      }
    }
    &.dp-1 {
      path {
        fill: #3c9418;
      }
    }
  }
  .card-tag {
    position: absolute;
    top: 0;
    left: 12px;
    width: 16px;
    height: 20px;
  }
  .tip {
    width: 86%;
    height: auto;
    color: #c6daf5;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    background-color: rgba(185, 198, 235, 0.43);
  }
  .title {
    font-size: 14px !important;
  }
}
</style>
